const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin")
// const ESLintPlugin = require('eslint-webpack-plugin')
module.exports = {
    mode: "development",
    entry: path.resolve(__dirname, "./src/index.js"),
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: '[name].js'  // 定义一个变量导出
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader","postcss-loader"]
            }
        ]
    },
    plugins: [  // 所有plugins 都需要配置在 plugins配置项里
        new HtmlWebpackPlugin({
            title: "My App",  // 设置 打包之后的title
            filename: "index.html",  // 打包之后的html名称
            template: "./src/public/index.html"  // 要打包的模板
        }),
        new MiniCssExtractPlugin({ // 配置 提取css的 插件
            filename: '[name].css'  // 生成一个变量css名称
        }),
        // new ESLintPlugin()
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({
            patterns: [{
                from: "src/static",
                to: "static"
            }],
        })
    ],
    devServer: {
        // 自动开启浏览器
        open: true,
        // 端口
        port: 8081,
        liveReload: true,//启动自动更新
        proxy: {
            '/api': {
                target: 'http://localhost:8787',
                pathRewrite: { '^/api': '' }
              }
          }
    }
}